<template>
	<view class="content poRel" :style="'box-sizing: border-box;background-size: 100% 100%;background-image: url('+imageUrl+'/tu8.png);'">
		<view style="height: 125rpx;"></view>
		<view class="mar dis disAl" style="width: 460rpx;height: 720rpx;">
			<image :src="imageUrl+'/cqq.png'" mode="widthFix" :class="handleShake?'shake-x-ani':''" class="wid100"></image>
		</view>
		<view class="textCen foSi30" style="color: #FFD49F;">默念10秒钟，点击每日一拜</view>
		<view class="mar-top40 foSi40 fowe600 bon mar dis disAl disJuC" @click="qiuquan()">每日一拜</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:this.global.url,
				imageUrl: this.global.imageUrl,
				handleShake: false
			}
		},
		onLoad() {
			this.alioss()
		},
		methods: {
			alioss(){
				var that  = this;
				uni.request({
				    // http://jufeng.tengshuokeji.cn//yonghu/order/order_comments
				    url: that.global.url + '/api/index/alioss',
				    method: "POST",
				    data: {},
				    success(res) {
				        let result = res.data
				        console.log(result)
				        if (result.code == 1) {
				            that.global.ossurl = result.data
							console.log(that.global.ossurl);
							that.ossurl = that.global.ossurl;
				        }
				    }
				})
			},
			qiuquan(){
				var that = this
				uni.request({
					url: that.global.url+'/api/Draw', 
					data: {},
					header: {
						 'Content-Type': 'application/json' ,//自定义请求头信息
						 'token':uni.getStorageSync('token')
					},
					method:'POST',//请求方式，必须为大写
					success: (res) => {
					    let result = res.data
					    if(result.code == 1){
							console.log(result.data);
							that.handleShake = true
							// 定义变量
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = true;
							innerAudioContext.src = that.imageUrl+'yao.mp3';
							setTimeout(() => {
							  that.tiaozhuan('/pages/wishing/answer?id='+result.data.id+'&name='+result.data.name)
							}, 3000);
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					}
				})
				
			},
			tiaozhuan(url){
				uni.redirectTo({
					url: url
				})
				
			}
		}
	}
</script>

<style>
	.content {
		height: 100vh;
	}
	.bon{
		width: 292rpx;
		height: 81rpx;
		color: #B11918;
		background: linear-gradient(to top, #F9AA17, #FEF503);
		border: 8rpx solid #FF7D05;
		border-radius: 50rpx;
	}
	.shake-x-ani{
		animation: shakeAni 3s ease-in-out;
	}
	@keyframes shakeAni {
		10% { transform: translate3d(-30px, 0, 0); }
		20% { transform: translate3d(30px, 0, 0); }
		30% { transform: translate3d(-30px, 0, 0); }
		40% { transform: translate3d(30px, 0, 0); }
		50% { transform: translate3d(-30px, 0, 0); }
		60% { transform: translate3d(30px, 0, 0); }
		70% { transform: translate3d(-30px, 0, 0); }
		80% { transform: translate3d(30px, 0, 0); }
		90% { transform: translate3d(-30px, 0, 0); }
		/* 10% { transform: rotate(0.1turn); }
		20% { transform: rotate(-0.1turn); }
		30% { transform: rotate(0.1turn); }
		40% { transform: rotate(-0.1turn); }
		50% { transform: rotate(0.1turn); }
		60% { transform: rotate(-0.1turn); }
		70% { transform: rotate(0.1turn); }
		80% { transform: rotate(-0.1turn); }
		90% { transform: rotate(0.1turn); } */
		
	}
</style>
